<template>
  <view class="user-container">
    <!-- 顶部欢迎区 -->
    <view class="top-bar">
      <image 
        src="/static/top-bg.png" 
        class="bg-img" 
        mode="scaleToFill"
      ></image>
      <view class="user-info">
        <image 
          src="/static/fox-avatar.png" 
          class="avatar"
        ></image>
        <view class="text-group">
          <text class="welcome-text">
            {{ isLogin ? `HI~${userInfo.username}` : 'HI~欢迎回来' }}
          </text>
          <button 
            class="login-btn" 
            v-if="!isLogin"
            @click="goLogin"
          >
            登录
          </button>
          <button 
            class="logout-btn" 
            v-if="isLogin"
            @click="handleLogout"  <!-- 修正：调用重命名后的退出方法 -->
          >
            退出登录
          </button>
        </view>
      </view>
      <view class="stats">
        <text>关注3</text>
        <text class="divider">|</text>
        <text>话题{{ isLogin ? '5' : '0' }}</text>
      </view>
    </view>

    <!-- 功能图标区 -->
    <view class="func-icons">
      <view class="icon-item">
        <image src="/static/collect.png" class="icon"></image>
        <text>收藏</text>
      </view>
      <view class="icon-item">
        <image src="/static/history.png" class="icon"></image>
        <text>历史</text>
      </view>
      <view class="icon-item">
        <image src="/static/setting.png" class="icon"></image>
        <text>设置</text>
      </view>
    </view>

    <!-- 广告横幅 -->
    <view class="ad-banner">
      <text class="ad-text">瓜分30万现金红包</text>
      <text class="ad-btn">速抢>></text>
    </view>

    <!-- 发布区域 -->
    <view class="publish-area">
      <view class="feature-icons">
        <image src="/static/album.png" class="feature-icon"></image>
        <image src="/static/camera.png" class="feature-icon"></image>
        <image src="/static/link.png" class="feature-icon"></image>
      </view>
      <text class="stats-text">已有385,893人在这里发布身边的新鲜事</text>
      <button 
        class="publish-btn" 
        @click="handlePublish"
        :disabled="!isLogin"
      >
        {{ isLogin ? '我也要发布' : '请先登录' }}
      </button>
      <text class="link-text">先去逛逛</text>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['isLogin', 'userInfo'])
  },
  methods: {
    ...mapMutations(['logout']),
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    },
    // 修正：方法名重命名为handleLogout，避免与mutation冲突
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.logout()  // 调用Vuex的logout mutation
            uni.showToast({ title: '已退出登录', icon: 'none' })
          }
        }
      })
    },
    handlePublish() {
      if (!this.isLogin) return
      uni.showToast({ title: '进入发布页', icon: 'none' })
    }
  }
}
</script>

<style scoped>
/* 新增退出按钮样式 */
.logout-btn {
  background-color: #666;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  line-height: 1;
}

/* 修正：添加display: flex使flex布局生效 */
.user-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 顶部欢迎区 */
.top-bar {
  position: relative;
  width: 100%;
  height: 200rpx;
}
.bg-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.user-info {
  position: relative;
  z-index: 2;
  display: flex;
  padding: 30rpx 20rpx;
  align-items: center;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #fff;
  padding: 5rpx;
}
.text-group {
  margin-left: 20rpx;
}
.welcome-text {
  color: #fff;
  font-size: 30rpx;
  display: block;
  margin-bottom: 10rpx;
}
.login-btn {
  background-color: #ff6600;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  line-height: 1;
}
.stats {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 26rpx;
  margin-top: 10rpx;
}
.divider {
  margin: 0 20rpx;
}

/* 功能图标区 */
.func-icons {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 30rpx 0;
  margin: 20rpx 0;
  border-radius: 10rpx;
}
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}
.icon-item text {
  font-size: 24rpx;
  color: #333;
}

/* 广告横幅 */
.ad-banner {
  background-color: #e63a3a;
  margin: 0 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ad-text {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
}
.ad-btn {
  color: #fff;
  font-size: 26rpx;
  background-color: #ffcc00;
  padding: 5rpx 15rpx;
  border-radius: 15rpx;
}

/* 发布区域 */
.publish-area {
  background-color: #fff;
  margin: 20rpx;
  padding: 40rpx 20rpx;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature-icons {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}
.feature-icon {
  width: 80rpx;
  height: 80rpx;
  margin: 0 30rpx;
}
.stats-text {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 30rpx;
  text-align: center;
}
.publish-btn {
  background-color: #ff3b30;
  color: #fff;
  font-size: 28rpx;
  padding: 15rpx 60rpx;
  border-radius: 30rpx;
  margin-bottom: 20rpx;
}
.publish-btn:disabled {
  background-color: #ccc;
  opacity: 0.7;
}
.link-text {
  color: #007aff;
  font-size: 24rpx;
  text-decoration: underline;
}
</style>